
<template>
  <div id="main" class="main">
    <div class="empty"></div>
    <el-dropdown>
      <span class="el-dropdown-link">
        {{userName}}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>帮助</el-dropdown-item>
        <el-dropdown-item @click.stop.native="logout" style="color: red"
        >退出</el-dropdown-item
        >
      </el-dropdown-menu>
    </el-dropdown>
    <div class="statistics">
      <el-tabs v-model="pageTab" @tab-click='handleClick'>
        <el-tab-pane
            v-for="item in pageTabs"
            :key="item"
            :label="item"
            :name="item"
        >
          <el-row class="padding">
            <el-col :span="9">
                            <span class="tip">
                                该看板用于对交易概况的整体进行分析，用于获知交易的整体
                                <br />
                                状况及变化趋势。看板内的数据遵循统一的指标字典
                            </span>
            </el-col>
            <el-col :span="15">
              <el-radio-group
                  v-model="dateType"
                  @change="changeDateType"
              >
                <el-radio-button label="date"
                >日</el-radio-button
                >
                <el-radio-button label="week"
                >周</el-radio-button
                >
                <el-radio-button label="month"
                >月</el-radio-button
                >
                <el-radio-button label="year"
                >年</el-radio-button
                >
              </el-radio-group>
              <ksdate
                  ref="ksdate"
                  :vuexModelName="vuexModelName"
                  :id="'startRange'"
                  :date="startdate"
                  :type="dateType"
                  @changeDateType="changeDateType"
                  @getDate="getDate"
              ></ksdate>
              <el-button
                  type="text"
                  class="setting-btn"
                  icon="el-icon-plus"
                  @click="changeCompare"
              >
                添加对比
              </el-button>
              <ksdate
                  v-show="showCompareDate"
                  ref="ksdate"
                  :vuexModelName="vuexModelName"
                  :id="'endRange'"
                  :date="enddate"
                  :type="dateType"
                  @getDate="(value1,value2) => {params.endRange.startDate=value1,params.endRange.endDate=value2}"
              ></ksdate>
            </el-col>
          </el-row>
          <el-row class="padding">
            <select-item
                @filterDimension="(value) => {params.filterDimension = value}"
                @platform="(value) => {params.platform = value}"
            ></select-item>
            <el-button class="check" type="primary" @click="doCheck()">查询</el-button>
          </el-row>
<!--          <el-row style="text-align: right">-->
<!--            <el-button type="primary" @click="doCheck()">查询</el-button>-->
<!--          </el-row>-->
          <ksdatepane
              :dataReportInfoYear="dataReportInfoYear"
              :payPart = "payPart"
              :showCompareDate = "showCompareDate"
          ></ksdatepane>
          <ksdatepane-two
              :dataReportInfoYear="dataReportInfoYear"
              :payPart = "payPart"
              :showCompareDate = "showCompareDate"
          ></ksdatepane-two>
          <analyze
              :dataReportInfoYear="dataReportInfoYear"
              :payPart = "payPart"
              :showCompareDate = "showCompareDate"
          ></analyze>
          <chart
              :vuexModelName="vuexModelName"
              id="chart1"
              ref="chart1"
              :staticticsData="orderPlace"
              :staticticsDataFirst="orderPlaceFirst"
              :directions="orderPlace.yAxis"
              :description="description"
              :options="{
                            title: '订单下单',
                            type: '下单',
                            buttonList: ['人数', '次数', '金额'],
                            statisticsList: [
                                {
                                  name: '折线图',
                                  label: 'line'
                                },
                                {
                                  name: '柱状图',
                                  label: 'bar'
                                }],
                            dscription: '自2021-7-13 至 2021-8-11 数据变化趋势',
                            rightTopChangeType: true,
                            changeDirection: true,
                        }"
              @searchChart="searchChart"
          >
          </chart>
          <chart
              :vuexModelName="vuexModelName"
              id="chart2"
              ref="chart2"
              :staticticsData="orderPay"
              :staticticsDataFirst="orderPayFirst"
              :directions="orderPay.yAxis"
              :description="description"
              :options="{
                            title: '订单支付',
                            type: '支付',
                            buttonList: ['人数', '次数', '金额'],
                            statisticsList: [
                                {
                                  name: '折线图',
                                  label: 'line'
                                },
                                {
                                  name: '柱状图',
                                  label: 'bar'
                                }],
                            dscription: '自2021-7-13 至 2021-8-11 数据变化趋势',
                            rightTopChangeType: true,
                            changeDirection: true,
                        }"
              @searchChart="searchChart"
          >
          </chart>
          <chart
              :vuexModelName="vuexModelName"
              id="chart3"
              ref="chart3"
              :staticticsData="orderRefund"
              :staticticsDataFirst="orderRefundFirst"
              :directions="orderRefund.yAxis"
              :description="description"
              :options="{
                            title: '订单退款',
                            type: '退款',
                            buttonList: ['人数', '次数', '金额'],
                            statisticsList: [
                                {
                                  name: '折线图',
                                  label: 'line'
                                },
                                {
                                  name: '柱状图',
                                  label: 'bar'
                                }],
                            dscription: '自2021-7-13 至 2021-8-11 数据变化趋势',
                            rightTopChangeType: true,
                            changeDirection: true,
                        }"
              @searchChart="searchChart"
          >
          </chart>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
// import { getDataReportInfoYear } from '@/api/etcwxApi'
import maintenanceModule from './homeModule'
import { searchParamsComputed } from '@/utils'
import eventHub from '@/utils/eventHub'
const computed = searchParamsComputed(
    Object.keys(maintenanceModule.state.postParams),
    'homeModule'
)
import ksdatepane from './components/ksdatapane.vue'
import ksdatepaneTwo from './components/ksdatapaneTwo.vue'
import analyze from './components/analyze.vue'
import chart from './components/chart.vue'
import selectItem from './components/select.vue'
import dayjs from 'dayjs'
import {getBusinessType, payPart, orderPlace, orderPay, orderRefund, userInfo} from "@/assets/js/api"

export default {
  components: {
    ksdatepane,
    ksdatepaneTwo,
    analyze,
    chart,
    selectItem,
  },
  data() {
    return {
      pageTabs: ["核心看板","敏捷看板"],
      pageTab: '核心看板',
      userName: '暂未登录',
      vuexModelName: 'homeModule',
      statisticsTab: '柱状图',
      // 开始时间
      YearDate: new Date().getFullYear() + '/01/01',
      startdate: new Date(new Date().getTime() - 3600 * 1000 * 24),
      enddate: new Date(new Date().getTime() - 3600 * 1000 * 48),
      startDate: dayjs(new Date().getTime() - 3600 * 1000 * 24)
          .startOf('date')
          .format('YYYY-MM-DD'),
      endDate: dayjs(new Date().getTime() - 3600 * 1000 * 24)
          .startOf('date')
          .format('YYYY-MM-DD'),
      dataReportInfoYear: {
        totalAmount: '',
        totalTaxAmount: '',
        consumeAmount: '',
      },
      payPart: {                //    面板数据
        customUnitRatio: "" || 1,
        customerUnitPriceComparison: "" || "1%",
        orderCnt: "" || 1,
        orderCntRatio: "" || "1%",
        orderNum: "" || 1,
        orderNumRatio: "" || "1%",
        orderPrice: "" || 1,
        orderPriceRatio: "" || "1%",
        payCnt: "" || 1,
        payCntRatio: "" || "1%",
        payConversionRateComparison: "" || "1%",
        payConversionRatio: "" || "1%",
        payNum: "" || 1,
        payNumRatio: "" || "1%",
        payPrice: "" || 1,
        payPriceRatio: "" || "1%"
      },
      showCompareDate: false,
      params: {
        busiType:"bussiness",
        indexSetCode:"abc1234ACDS",
        busiId:"appCodeBusinessId",
        userName:"chaixiubing",
        startRange:{
          startDate:"",//yyyy-mm-dd格式
          endDate:""//yyyy-mm-dd格式
        },
        endRange:{
          startDate:"0000-00-00",//yyyy-mm-dd格式
          endDate:"0000-00-00"//yyyy-mm-dd格式
        },
        platform:"",
        filterDimension:[
          {
            businessType:[]//业务类型
          },
          {
            memberShip:[]//会员身份
          },
          {
            isNewVip:[]//新老用户
          },
          {
            memberShipInter: []   //会员权益
          }
        ]
      },   // 查询参数
      orderPlace: {
        type: 'line',
        xAxis:[
          {
            name:'日期', // x轴当前时间，可以自己定
            type:"category",
            data:[0,0,0,0,0,0,0]
          }
        ],
        yAxis:[
          {
            name:'优品',// y轴业务类型
            type:"line",// 图表类型
            data:[120, 200, 150, 80, 70, 110, 130]
          },
          {
            name:'故事',// y轴业务类型
            type:"line",// 图表类型
            data:[120, 200, 150, 80, 70, 110, 130],
          },
          {
            name:'会员',// y轴业务类型
            type:"line",// 图表类型
            data:[120, 200, 150, 80, 70, 110, 130],
          },
          {
            name:'儿教',// y轴业务类型
            type:"line",// 图表类型
            data:[120, 200, 150, 80, 70, 110, 130],
          }
        ],
      },
      orderPlaceFirst: {
        type: 'line',
        xAxis:[
          {
            name:'日期', // x轴当前时间，可以自己定
            type:"category",
            data:[0,0,0,0,0,0,0]
          }
        ],
        yAxis:[
          {
            name:'优品',// y轴业务类型
            type:"line",// 图表类型
            '人数':[120, 200, 150, 80, 70, 110, 130],
            '次数':[120, 200, 150, 80, 70, 110, 130],
            '金额':[120, 200, 150, 80, 70, 110, 130]
          },
          {
            name:'故事',// y轴业务类型
            type:"line",// 图表类型
            '人数':[120, 200, 150, 80, 70, 110, 130],
            '次数':[120, 200, 150, 80, 70, 110, 130],
            '金额':[120, 200, 150, 80, 70, 110, 130]
          },
          {
            name:'会员',// y轴业务类型
            type:"line",// 图表类型
            '人数':[120, 200, 150, 80, 70, 110, 130],
            '次数':[120, 200, 150, 80, 70, 110, 130],
            '金额':[120, 200, 150, 80, 70, 110, 130]
          },
          {
            name:'儿教',// y轴业务类型
            type:"line",// 图表类型
            '人数':[120, 200, 150, 80, 70, 110, 130],
            '次数':[120, 200, 150, 80, 70, 110, 130],
            '金额':[120, 200, 150, 80, 70, 110, 130]
          }
        ],
      },
      orderPay: {
        type: 'line',
        xAxis:[
          {
            name:'日期', // x轴当前时间，可以自己定
            type:"category",
            data:[0,0,0,0,0,0,0]
          }
        ],
        yAxis:[
          {
            name:'优品',// y轴业务类型
            type:"line",// 图表类型
            data:[120, 200, 150, 80, 70, 110, 130]
          },
          {
            name:'故事',// y轴业务类型
            type:"line",// 图表类型
            data:[120, 200, 150, 80, 70, 110, 130],
          },
          {
            name:'会员',// y轴业务类型
            type:"line",// 图表类型
            data:[120, 200, 150, 80, 70, 110, 130],
          },
          {
            name:'儿教',// y轴业务类型
            type:"line",// 图表类型
            data:[120, 200, 150, 80, 70, 110, 130],
          }
        ],
      },
      orderPayFirst: {
        type: 'line',
        xAxis:[
          {
            name:'日期', // x轴当前时间，可以自己定
            type:"category",
            data:[0,0,0,0,0,0,0]
          }
        ],
        yAxis:[
          {
            name:'优品',// y轴业务类型
            type:"line",// 图表类型
            '人数':[120, 200, 150, 80, 70, 110, 130],
            '次数':[120, 200, 150, 80, 70, 110, 130],
            '金额':[120, 200, 150, 80, 70, 110, 130]
          },
          {
            name:'故事',// y轴业务类型
            type:"line",// 图表类型
            '人数':[120, 200, 150, 80, 70, 110, 130],
            '次数':[120, 200, 150, 80, 70, 110, 130],
            '金额':[120, 200, 150, 80, 70, 110, 130]
          },
          {
            name:'会员',// y轴业务类型
            type:"line",// 图表类型
            '人数':[120, 200, 150, 80, 70, 110, 130],
            '次数':[120, 200, 150, 80, 70, 110, 130],
            '金额':[120, 200, 150, 80, 70, 110, 130]
          },
          {
            name:'儿教',// y轴业务类型
            type:"line",// 图表类型
            '人数':[120, 200, 150, 80, 70, 110, 130],
            '次数':[120, 200, 150, 80, 70, 110, 130],
            '金额':[120, 200, 150, 80, 70, 110, 130]
          }
        ],
      },
      orderRefund: {
        type: 'line',
        xAxis:[
          {
            name:'日期', // x轴当前时间，可以自己定
            type:"category",
            data:[0,0,0,0,0,0,0]
          }
        ],
        yAxis:[
          {
            name:'优品',// y轴业务类型
            type:"line",// 图表类型
            data:[120, 200, 150, 80, 70, 110, 130]
          },
          {
            name:'故事',// y轴业务类型
            type:"line",// 图表类型
            data:[120, 200, 150, 80, 70, 110, 130],
          },
          {
            name:'会员',// y轴业务类型
            type:"line",// 图表类型
            data:[120, 200, 150, 80, 70, 110, 130],
          },
          {
            name:'儿教',// y轴业务类型
            type:"line",// 图表类型
            data:[120, 200, 150, 80, 70, 110, 130],
          }
        ],
      },
      orderRefundFirst: {
        type: 'line',
        xAxis:[
          {
            name:'日期', // x轴当前时间，可以自己定
            type:"category",
            data:[0,0,0,0,0,0,0]
          }
        ],
        yAxis:[
          {
            name:'优品',// y轴业务类型
            type:"line",// 图表类型
            '人数':[120, 200, 150, 80, 70, 110, 130],
            '次数':[120, 200, 150, 80, 70, 110, 130],
            '金额':[120, 200, 150, 80, 70, 110, 130]
          },
          {
            name:'故事',// y轴业务类型
            type:"line",// 图表类型
            '人数':[120, 200, 150, 80, 70, 110, 130],
            '次数':[120, 200, 150, 80, 70, 110, 130],
            '金额':[120, 200, 150, 80, 70, 110, 130]
          },
          {
            name:'会员',// y轴业务类型
            type:"line",// 图表类型
            '人数':[120, 200, 150, 80, 70, 110, 130],
            '次数':[120, 200, 150, 80, 70, 110, 130],
            '金额':[120, 200, 150, 80, 70, 110, 130]
          },
          {
            name:'儿教',// y轴业务类型
            type:"line",// 图表类型
            '人数':[120, 200, 150, 80, 70, 110, 130],
            '次数':[120, 200, 150, 80, 70, 110, 130],
            '金额':[120, 200, 150, 80, 70, 110, 130]
          }
        ],
      },
      description: ''
    }
  },
  computed: {
    ...computed,
    tableHeight() {
      return this.$store.state.element.tableHeight + 62
    },
  },
  created() {
    getBusinessType().then((res)=>{console.log(res)})
    console.log(this.params)
    this.searchBtnClick()
    // this.searchChart()
    // this.getDataReportInfoYear()
    this.staticticsData = {
      type: 'line',
      xAxis:[
        {
          name:'timelist1', // x轴当前时间，可以自己定
          type:"category",
          data:[120, 200, 150, 80, 70, 110, 130]
        },
        {
          name:'timelist2',// x轴当前时间，可以自己定
          type:"category",
          data:[12, 20, 15, 8, 7, 11, 13],
        },
      ],
      yAxis:[
        {
          name:'category1',// y轴业务类型
          type:"bar",// 图表类型
          data:[120, 200, 150, 80, 70, 110, 130]
        },
        {
          name:'category2',// y轴业务类型
          type:"bar",// 图表类型
          data:[120, 200, 150, 80, 70, 110, 130],
        },
        {
          name:'category3',// y轴业务类型
          type:"bar",// 图表类型
          data:[120, 200, 150, 80, 70, 110, 130],
        },
        {
          name:'category4',// y轴业务类型
          type:"bar",// 图表类型
          data:[12, 200, 150, 80, 70, 11, 130],
        }
      ],
    }
  },
  mounted() {
    this.$nextTick(() =>{
      this.doCheck()
      this.routerFirst()
      this.getUserInfo()
    })
  },
  methods: {
    changeCompare() {
      this.showCompareDate = true
    },
    searchChart(id) {
      console.log(this.$refs[id], '-----------')
      console.log(this.$store.state.homeModule.postParams)
      // axiosChartData.then(params,(res)=>{
      // this.$refs.[id][0].$refs[id].search(res)
      // })
    },
    changeDateType(e) {
      this.params.endRange.startDate = "0000-00-00"
      this.params.endRange.endDate = "0000-00-00"
      this.showCompareDate = false
      this.dateType = e
      if (e === 'date') {
        this.startdate = new Date().getTime() - 3600 * 1000 * 24
        this.enddate = new Date().getTime() - 3600 * 1000 * 48
      }
      if (e === 'week') {
        this.startdate = new Date()
        this.enddate = new Date().getTime() - 3600 * 1000 * 24 * 7
      }
      // if (e === 'month') {
      //     this.startdate = new Date()
      //     this.enddate = new Date().getTime() - 3600 * 1000 * 24 * 30
      // }
      this.$refs.ksdate[0].changeDate(this.startdate)
      this.$refs.ksdate[1].changeDate(this.enddate)
    },
    // 时间组件返回数据处理事件
    getDate(value1,value2){
      this.params.startRange.startDate = value1
      this.params.startRange.endDate = value2
      if(value1 === value2){
        let nowDate = new Date(value1).getTime() - 3600 * 1000 * 24 * 6
        let lastDate = dayjs(nowDate).startOf('date').format('YYYY-MM-DD')
        console.log(lastDate)
        this.description = "自" + " " + lastDate + " " + "至" + " " + value2 + " " +  "数据变化趋势"
      }else{
        this.description = "自" + " " + value1 + " " + "至" + " " + value2 + " " +  "数据变化趋势"
      }
    },
    // dateInitData () {

    // },
    searchBtnClick() {
      if (!this.showCompareDate) {
        this.$store.commit(this.vuexModelName + '/updatePostParams', {
          endRange: {
            startDate: '0000-00-00',
            endDate: '0000-00-00',
          },
        })
      }
      // this.$store.dispatch(`${this.vuexModelName}/getList`);
      this.getDataReportInfoYear()
    },
    // checkTime () {
    //     this.endDate = (new Date(this.YearDate).getFullYear()) + "/12/31"
    //     this.$store.commit(this.vuexModelName + '/updatePostParams', {
    //         startDate: this.startDate,
    //         endDate: this.endDate
    //     })
    //     if (!this.startDate) {
    //         this.$$message('请选择开始时间', 'error')
    //         return;
    //     }

    //     if (!this.endDate) {
    //         this.$$message('请选择结束时间', 'error')
    //         return;
    //     }

    //     this.searchBtnClick()
    // },
    async getDataReportInfoYear() {
      // let params = {
      //     startDate:this.startDate?new Date(this.startDate+" 00:00:00").getTime():"",
      //     endDate:this.endDate?new Date(this.endDate+" 23:59:59").getTime():""
      // }
      try {
        // let { data } = await getDataReportInfoYear(params)
        let data = { year: [{ name: '11' }] }
        this.dataReportInfoYear = Object.assign(
            {},
            this.dataReportInfoYear,
            data.year
        )
      } catch (err) {
        this.$$message(err, 'error')
      }
    },
    //  点击查询
    doCheck() {
      console.log(this.params)
      // 重置对比日期
      console.log(this.showCompareDate)
      if (this.showCompareDate === false) {
        console.log(1)
        this.params.endRange.startDate = "0000-00-00"
        this.params.endRange.endDate = "0000-00-00"
      }
      // 判断筛选条件是否都已经选择
      console.log(this.params.platform)
      console.log(this.params.filterDimension[2].isNewVip.length)
      console.log(this.params.filterDimension[0].businessType.length)
      console.log(this.params.filterDimension[1].memberShip.length)
      if(this.params.platform === "" || this.params.filterDimension[2].isNewVip.length === 0 || this.params.filterDimension[0].businessType.length === 0 || this.params.filterDimension[1].memberShip.length === 0){
        console.log(1)
        this.$message.error('请完成所有筛选维度条件')
      } else {
        this.getPayPart()
        this.getOrderPlace()
        this.getOrderPay()
        this.getOrderRefund()
      }
    },
    //查询面板数据
    getPayPart(){
      payPart(this.params)
          .then((data)=>{
            console.log(data)
            this.payPart = data
          })
    },
    // 查询订单下单图表数据
    getOrderPlace(){
      console.log(this.params)
      orderPlace(this.params)
          .then((data)=>{
            console.log(data)
            this.orderPlaceFirst.xAxis = data.data.xAxis
            this.orderPlaceFirst.yAxis = data.data.yAxis
            console.log(data.data)
            this.orderPlace.xAxis = data.data.xAxis
            this.orderPlace.yAxis = data.data.yAxis.map((item) =>{
              return{
                name: item.name,
                type: item.type,
                data: item['人数']
              }
            })
            console.log(this.orderPlaceFirst)
            console.log(this.orderPlace)
            this.$nextTick(() =>{
              this.$refs.chart1[0].changeAllData()
              console.log(this.$refs.chart2)
            })
          })
    },
    // 查询订单支付图表数据
    getOrderPay(){
      orderPay(this.params)
          .then((data)=>{
            console.log(data)
            this.orderPayFirst.xAxis = data.data.xAxis
            this.orderPayFirst.yAxis = data.data.yAxis
            console.log(data.data)
            this.orderPay.xAxis = data.data.xAxis
            this.orderPay.yAxis = data.data.yAxis.map((item) =>{
              return{
                name: item.name,
                type: item.type,
                data: item['人数']
              }
            })
            console.log(this.orderPayFirst)
            console.log(this.orderPay)
            this.$nextTick(() =>{
              this.$refs.chart2[0].changeAllData()
              console.log(this.$refs.chart2)
            })
          })
    },
    // 查询订单退款图表数据
    getOrderRefund(){
      orderRefund(this.params)
          .then((data)=>{
            console.log(data)
            this.orderRefundFirst.xAxis = data.data.xAxis
            this.orderRefundFirst.yAxis = data.data.yAxis
            console.log(data.data)
            this.orderRefund.xAxis = data.data.xAxis
            this.orderRefund.yAxis = data.data.yAxis.map((item) =>{
              return{
                name: item.name,
                type: item.type,
                data: item['人数']
              }
            })
            console.log(this.orderRefundFirst)
            console.log(this.orderRefund)
            this.$nextTick(() =>{
              this.$refs.chart3[0].changeAllData()
              console.log(this.$refs.chart3)
            })
          })
    },
    //  点击切换tab
    handleClick(tab){
      console.log(tab.name)
      if(tab.name === '敏捷看板'){
        this.$router.push({path:'/home/agility'})
        let router = [{path:'/home/agility',name:"home/agility",meta:{"title":"行为看板"}}]
        eventHub.$emit('add', router)
      }else if(tab.name === '核心看板'){
        this.$router.push({path:'/home'})
        let router = [{path:'/',name:"home",meta:{"title":"交易看板"}}]
        eventHub.$emit('add', router)
      }
    },
    routerFirst(){
      if(this.pageTab === '敏捷看板'){
        let router = [{path:'/home/agility',name:"home/agility",meta:{"title":"行为看板"},show: true}]
        eventHub.$emit('add', router)
      }else if(this.pageTab === '核心看板'){
        console.log(1111111)
        let router = [{path:'/',name:"home",meta:{"title":"交易看板"},show: true}]
        eventHub.$emit('add', router)
      }
    },
    logout() {
      window.location.href = "/ks-data-support/logout";
    },
    getUserInfo(){
      userInfo().then(res=>{
        if(res.code==0){
          this.userName = res.user.realName;
        }
      })
    }
  },
}
</script>
<style lang="scss" scoped>
.statistics {
  background: transparent;
  .headerBar {
    height: 52px;
    line-height: 52px;
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #181818;
    border-bottom: 1px solid #eee;
    background: #fff;
    span {
      margin-left: 20px;
    }
  }
}
.tip {
  color: #666;
  font-size: 12px;
}
.main{
  width: 88%;
  float: right;
  position: relative;
  top: 0;
}
.empty{
  width: 88%;
  height: 60px;
  background-color: white;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99;
  border-bottom: #9fa5b6 solid 1px;
}
.check{
  float: right!important;
  margin-top: -40px!important;
  margin-right: 10px!important;
}
.padding{
  padding-left: 10px;
  box-sizing: border-box;
}
.el-dropdown {
  position: fixed;
  right: 20px;
  top: 20px;
  color: #000000;
  z-index: 9999;
}
</style>
<style>
.el-tabs__header{
  padding: 0!important;
  position: fixed!important;
  top: 10px!important;
  left: 14%;
  width: 100%!important;
  z-index: 999!important;
}
.el-tabs__content{
  margin-top: -18px!important;
}
.el-tabs__nav-wrap::after{
  background-color: transparent!important;
}
</style>
